<?php $activePage = "forms"; ?>
<?php include("includes/header.php"); ?>	
<!-- container -->
<div class="container">		
	<div class="row">
		<div class="g12">
			<h2 class="h2">Forms</h2>
			<hr />
		</div>
	</div>

	<div class="row">
		<div class="g8">
			<h3 class="h3">Inputs</h3>
			<div class="fg">
				<label>Default Text Input</label>
				<input type="text" class="text"/>
			</div>
			<div class="fg">
				<label>Input with autofocus</label>
				<input type="text" class="text" autofocus/>
			</div>
			<div class="fg">
				<label>Label</label>
				<input type="text" class="text small" />
			</div>
			<div class="fg">
				<label>Label</label>
				<input type="text" class="text large" />
				<small>description of the field</small>
			</div>
			<div class="fg fg_error">
				<label>Label with error</label>
				<input type="text" class="text large" />
				<small>description of the field</small>
			</div>
			<div class="fg">
				<label>Label</label>
				<input type="text" class="text large" placeholder="with placeholder" />
			</div>
			<div class="fg">
				<label>Label with password</label>
				<input type="password" class="text large" value="1234"/>
			</div>
			<div class="fg">
				<label>Disabled Input</label>
				<input type="text" class="text disabled" disabled="disabled"/>
			</div>
			<div class="fh">
				<h4 class="h4">Inline/Horizontal Inputs</h4>
				<div class="fg">
					<label>inline Input</label>
					<input type="text" class="text small"/>
				</div>
				<div class="fg">
					<label>inline Input</label>
					<input type="text" class="text small"/>
				</div>
				<div class="fg">
					<label>inline Input</label>
					<input type="text" class="text small"/>
				</div>
			</div>
		</div>
		<div class="g4">
			<h4 class="h4">Inputs info</h4>
			
			<ul class="disc">
				<li>
					All form components must be inside a <code>&lt;div class="fg"&gt;</code>
				</li>
				<li>
					Default state is: Label above form field (like a block element). This improve form's readibility.
				</li>
				<li>
					All text input must have the <code>class="text"</code>
				</li>
				<li>
					But we can display <strong>inline forms</strong> items wrapping form elements with the  <code>class="fh"</code>
				</li>
				<li>
					<strong>Size class</strong>: Input can have one of those classes: <code>large</code> or <code>small</code>
				</li>
				<li>
					We can insert <strong>field annotations</strong> width:
					<code>&lt;small&gt;notes&lt;/small&gt;</code>
				</li>
				<li>
					To show an <strong>error in an input</strong> we must add <code>class="fg_error"</code> to the wrapper element.
				</li>
				<li>
					If we want that the field show a placeholder text we must add attribute <code>placeholder="text"</code> in the input
				</li>
			</ul>
		</div>	
	</div>
	<div class="row">
		<div class="g8">		
			<h3 class="h3">Selects / Dropdown</h3>
			<div class="fg">
				<label>Default Combo</label>
				<select>
					<option>empty</option>
				</select>
			</div>
			<div class="fg">
				<label>Small Combo</label>
				<select class="small">
					<option>empty</option>
				</select>
			</div>
			<div class="fg">
				<label>Large Combo</label>
				<select class="large">
					<option>empty</option>
				</select>
				<small>description of the field</small>
			</div>
			<div class="fg fg_error">
				<label>Default Combo</label>
				<select>
					<option>empty</option>
				</select>
			</div>
			<div class="fg">
				<label>Disabled Combo</label>
				<select class="disabled" disabled="disabled">
					<option>empty</option>
				</select>
			</div>
			<div class="fh">
				<div class="fg">
					<label>Inline Combo</label>
					<select class="small">
						<option>empty</option>
					</select>
				</div>
				<div class="fg">
					<label>Inline Combo</label>
					<select class="small">
						<option>empty</option>
					</select>
				</div>
				<div class="fg">
					<label>Inline Combo</label>
					<select class="small">
						<option>empty</option>
					</select>
				</div>
			</div>
			
			
			<h3 class="h3">Textarea</h3>
			<div class="fg">
				<label>Default Textarea</label>
				<textarea></textarea>
			</div>
			<div class="fg">
				<label>Large Textarea</label>
				<textarea class="large"></textarea>
			</div>
			<div class="fg fg_error">
				<label>Default Textarea</label>
				<textarea></textarea>
				<small>description of the field</small>
			</div>
			<div class="fg">
				<label>Disabled Textarea</label>
				<textarea disabled="disabled" class="disabled"></textarea>
			</div>
		</div>
		<div class="g4">
			<h4 class="h4">Dropdown & Text area info</h4>
			
			<ul class="disc">
				<li>
					All form components must be inside a <code>&lt;div class="fg"&gt;</code>
				</li>
				<li>
					Default state is: Label above form field (like a block element). This improve form's readibility.
				</li>
				<li>
					<strong>Size class</strong>: Combos can have one of those classes: <code>large</code> or <code>small</code>
				</li>
				<li>
					We can display <strong>inline forms</strong> items wrapping form elements with the  <code>class="fh"</code>
				</li>
				<li>
					We can insert <strong>field annotations</strong> width:
					<code>&lt;small&gt;notes&lt;/small&gt;</code>
				</li>
				<li>
					To show an <strong>error in an input</strong> we must add <code>class="fg_error"</code> to the wrapper element.
				</li>
			</ul>
		</div>	
	</div>
	<div class="row">
		<div class="g4">
			<h3 class="h3">Checkbox</h3>
			<div class="fg checkboxGroup">
				<label for="test_C_4">Checkbox with label on the left side</label>
				<input type="checkbox" id="test_C_4" class="checkbox" />
			</div>
			<div class="fg checkboxGroup">
				<input type="checkbox" id="test_C_5" class="checkbox" />
				<label for="test_C_5">Checkbox with label on the right side</label>
			</div>
			<div class="fg checkboxGroup">
				<label>Checkbox Group</label>
				<div class="options">	
					<div class="option">
						<input type="checkbox" id="test_C_1" class="checkbox">
						<label for="test_C_1">option 1</label>	
					</div>
					<div class="option">
						<input type="checkbox" id="test_C_2" class="checkbox">
						<label for="test_C_2">option 2</label>		
					</div>
					<div class="option">
						<input type="checkbox" id="test_C_3" class="checkbox">
						<label for="test_C_3">option 3</label>
					</div>
				</div>
			</div>
			<div class="fh">
				<div class="fg checkboxGroup">
					<label>Inline checkboxs</label>
					<div class="options">	
						<div class="option">
							<input type="checkbox" id="test_D_1" class="checkbox">
							<label for="test_D_1">opt 1</label>	
						</div>
						<div class="option">
							<input type="checkbox" id="test_D_2" class="checkbox">
							<label for="test_D_2">opt 2</label>		
						</div>
						<div class="option">
							<input type="checkbox" id="test_D_3" class="checkbox">
							<label for="test_D_3">opt 3</label>
						</div>
					</div>
				</div>
				<div class="fg fg_error checkboxGroup">
					<label>Inline checkboxs</label>
					<div class="options">	
						<div class="option">
							<input type="checkbox" id="test_D_1" class="checkbox">
							<label for="test_D_1">opt 1</label>	
						</div>
						<div class="option">
							<input type="checkbox" id="test_D_2" class="checkbox">
							<label for="test_D_2">opt 2</label>		
						</div>
						<div class="option">
							<input type="checkbox" id="test_D_3" class="checkbox">
							<label for="test_D_3">opt 3</label>
						</div>
					</div>
				</div>
			</div>
		</div>	
		<div class="g4">
			<h3 class="h3">Radio</h3>
			<div class="fg radioGroup">
				<label>Radio Group</label>
				<div class="options">	
					<div class="option">
						<input type="radio" value="valor del input" name="name" id="test_1" class="radio">
						<label for="test_1">option 1</label>	
					</div>
					<div class="option">
						<input type="radio" value="valor del input" name="name" id="test_2" class="radio">
						<label for="test_2">option 2</label>		
					</div>
					<div class="option">
						<input type="radio" value="valor del input" name="name" id="test_3" class="radio">
						<label for="test_3">option 3</label>
					</div>
				</div>
			</div>
			<div class="fg fg_error radioGroup">
				<label>Radio Group</label>
				<div class="options">	
					<div class="option">
						<input type="radio" value="valor del input" name="name" id="test_1" class="radio">
						<label for="test_1">option 1</label>	
					</div>
					<div class="option">
						<input type="radio" value="valor del input" name="name" id="test_2" class="radio">
						<label for="test_2">option 2</label>		
					</div>
					<div class="option">
						<input type="radio" value="valor del input" name="name" id="test_3" class="radio">
						<label for="test_3">option 3</label>
					</div>
				</div>
			</div>
			<div class="fh">
				<div class="fg radioGroup">
					<label>Inline Radio Group</label>
					<div class="options">	
						<div class="option">
							<input type="radio" value="valor del input" name="name" id="test_E_1" class="radio">
							<label for="test_E_1">op.1</label>	
						</div>
						<div class="option">
							<input type="radio" value="valor del input" name="name" id="test_E_2" class="radio">
							<label for="test_E_2">op.2</label>		
						</div>
						<div class="option">
							<input type="radio" value="valor del input" name="name" id="test_E_3" class="radio">
							<label for="test_E_3">op.3</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="g4">
			<h4 class="h4">Checkbox & Radio info</h4>
			
			<ul class="disc">
				<li>
					This is a checkbox structure:
					<pre>&lt;div class="fg checkboxGroup"&gt;
  &lt;label>Checkbox Group&lt;/label&gt;
  &lt;div class="options"&gt;
    &lt;div class="option"&gt;
      &lt;input type="checkbox" id="name" class="checkbox"&gt;
      &lt;label for="name">option 1&lt;/label&gt;
    &lt;/div>
    &lt;div class="option"&gt;
      &lt;input type="checkbox" id="name" class="checkbox"&gt;
      &lt;label for="name">option 2&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
				</li>
				<li>
					This is a Radiogroup structure:
					<pre>&lt;div class="fg radioGroup"&gt;
  &lt;label>Radio Group&lt;/label&gt;
  &lt;div class="options"&gt;
    &lt;div class="option"&gt;
      &lt;input type="radio" id="name" class="radio"&gt;
      &lt;label for="name">option 1&lt;/label&gt;
    &lt;/div>
    &lt;div class="option"&gt;
      &lt;input type="radio" id="name" class="radio"&gt;
      &lt;label for="name">option 2&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
				</li>
				<li>
					To show <strong>inline checkbox or radios</strong> you must wrap your form component in a <code>class="fh"</code>
				</li>
			</ul>
		</div>	
	</div>
</div> <!-- container -->		
<?php include("includes/footer.php"); ?>	